<template>
  <div class="page-container">
    <!-- 主要内容区域 -->
    <div class="main-content">
      <h2 class="section-title">推荐视频</h2>
      <div v-loading="loadingRecommended">
        <div v-if="recommendedVideos.length === 0" class="empty-state">
          <el-empty description="暂无推荐视频" />
        </div>
        <el-row v-else :gutter="20">
          <el-col :xs="12" :sm="8" :md="6" :lg="6" v-for="video in recommendedVideos" :key="video._id">
            <video-card :video="video" />
          </el-col>
        </el-row>
      </div>

      <h2 class="section-title">最新上传</h2>
      <div v-loading="loadingLatest">
        <div v-if="latestVideos.length === 0" class="empty-state">
          <el-empty description="暂无最新视频" />
        </div>
        <el-row v-else :gutter="20">
          <el-col :xs="12" :sm="8" :md="6" :lg="6" v-for="video in latestVideos" :key="video._id">
            <video-card :video="video" />
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from '@/services/axios'
import { ElMessage } from 'element-plus'
import VideoCard from '../../components/VideoCard.vue'

// 视频列表
const recommendedVideos = ref([])
const latestVideos = ref([])

// 加载状态
const loadingRecommended = ref(false)
const loadingLatest = ref(false)

// 获取推荐视频的方法
const fetchRecommendedVideos = async () => {
  loadingRecommended.value = true
  try {
    const response = await axios.get('/api/videos/recommended/list?limit=30')
    recommendedVideos.value = response.data.videos
  } catch (error) {
    console.error('获取推荐视频失败:', error)
    ElMessage.error('获取推荐视频失败')
  } finally {
    loadingRecommended.value = false
  }
}

// 获取最新视频的方法
const fetchLatestVideos = async () => {
  loadingLatest.value = true
  try {
    const response = await axios.get('/api/videos/latest/list?limit=20')
    latestVideos.value = response.data.videos
  } catch (error) {
    console.error('获取最新视频失败:', error)
    ElMessage.error('获取最新视频失败')
  } finally {
    loadingLatest.value = false
  }
}

// 组件挂载时获取数据
onMounted(() => {
  fetchRecommendedVideos()
  fetchLatestVideos()
})
</script>

<style scoped>
.page-container {
  display: flex;
  width: 100%;
}

.main-content {
  flex: 1;
  padding: 20px; /* 修改：添加内边距 */
}

.section-title {
  font-size: 20px;
  font-weight: 500;
  margin: 24px 0 16px 0;
  color: #0f0f0f;
}

.empty-state {
  margin: 40px 0;
  text-align: center;
}
</style>